<template>
	<!-- 可设置固定宽高比容器 -->
    <div class="outter" :style="formattedRatioStyle">
        <div class="inner" :style="formattedContentStyle">
            <div class="inner-content">
                <slot></slot>  
            </div>
        </div>
    </div>
</template>

<script>
    export default {
      data() {
        return {};
      },
//['ratio', 'overflow', 'overflowX', 'overflowY']
      props:{
		  ratio:{default:'1/1'},
		  overflow:{},
		  overflowX:{},
		  overflowY:{}
		  
	  },

      computed: {
        formattedRatioStyle() {
          let ratio = this.ratio;
		  let arr=ratio.split('/');
		  ratio=Number(arr[1])/Number(arr[0]) * 100
		  //console.log(ratio)
		  
          if (ratio == null || Number.isNaN(ratio)) {
            ratio = 100;
          }
          if (typeof ratio !== 'string' || !ratio.endsWith('%')) {
            ratio = ratio + '%';
          }
          return `padding-top: ${ratio};`;
        },

        formattedContentStyle() {
          const styles = [];
		 // let styles={}
          if (this.overflow) {
			
           styles.push("overflow:"+this.overflow);
          }
          if (this.overflowX) {
            styles.push('overflow-x:' + this.overflowX);
          }
          if (this.overflowY) {
            styles.push('overflow-y:' + this.overflowY);
          }
		  //console.log(styles.join(','))
		  //return styles;
         return styles.join(',');
        },
      }

    }
</script>
<style scoped lang="scss">
    .outter {
        width: 100%;
        height: 0;
        position: relative;
        .inner {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
			
        }
		.inner-content{
			width: 100%;
			height: 100%;
		}
    }
</style>
